import React, { Component } from 'react';
import {
    Dimensions,
    ScrollView,
    Text,
    View,
    StyleSheet,
    FlatList,
    Image,
} from 'react-native';

import AHWebView from 'react-native-autoheight-webview';

const { width, height } = Dimensions.get('screen');
const rpx = x => (width / 750) * x;

export default class DetailScreen extends Component {
    state = { details: null };
    current = 0; //当前滚动的序号

    componentDidMount() {
        console.log(this.props);
        const lid = this.props.route.params.lid;

        const url = 'http://101.96.128.94:9999/data/product/details.php?lid=' + lid;

        fetch(url)
            .then(res => res.json())
            .then(res => {
                console.log(res);

                this.setState({ details: res.details }, () => {
                    // 定时器赋值给变量timer, 便于在 销毁操作
                    this.timer = setInterval(() => {
                        this.current++;
                        // 超限
                        if (this.current == res.details.picList.length) this.current = 0;

                        this.fl.scrollToIndex({ index: this.current });
                    }, 2000);
                });
            });
    }

    // 当前添加了定时器, 每隔2s 滚动一次, 当我们返回前一页的时候, 定时器依然存在
    // 此时 定时器再次滚动时, 页面已经销毁了, 就报错!
    componentWillUnmount() {
        //页面卸载时, 销毁定时器即可!
        clearInterval(this.timer);
    }

    render() {
        if (!this.state.details) return <View />;

        const details = this.state.details;

        return (
            <ScrollView style={{ backgroundColor: 'white' }}>
                <Text style={ss.lname}>产品型号:{details.lname}</Text>
                <FlatList
                    ref={el => (this.fl = el)}
                    data={details.picList}
                    keyExtractor={(item, index) => index + ''}
                    renderItem={this._renderItem}
                    horizontal
                    pagingEnabled
                    onScroll={this._onScroll}
                />
                <Text style={{ fontSize: rpx(35) }}>{details.title}</Text>
                <Text
                    style={{ fontSize: rpx(30), color: 'gray', marginVertical: rpx(10) }}>
                    {details.subtitle}
                </Text>
                <Text style={{ fontSize: rpx(35), color: 'red' }}>
                    单价:{details.price}
                </Text>
                <View style={{ height: rpx(1), backgroundColor: 'gray' }} />
                {/* 局部网页 */}
                <AHWebView source={{ html: this.transHtml(details.details) }} />
            </ScrollView>
        );
    }

    // 对详情 html 进行处理, 补全域名
    transHtml(html) {
        // src="img  -> src="http://101.96.128.94:9999/img
        return html.replace(
            /src="img/g,
            'width="100%" src="http://101.96.128.94:9999/img',
        );
    }

    _onScroll = event => {
        // event.persist();
        // console.log(event);

        const x = event.nativeEvent.contentOffset.x;
        const w = event.nativeEvent.layoutMeasurement.width;

        this.current = Math.round(x / w);
    };

    _renderItem = ({ item }) => {
        return (
            <Image
                style={{ height: width, width }}
                source={{ uri: 'http://101.96.128.94:9999/' + item.md }}
            />
        );
    };
}

const ss = StyleSheet.create({
    lname: {
        color: 'gray',
        borderBottomWidth: rpx(1),
        paddingBottom: rpx(15),
        marginHorizontal: rpx(15),
        marginTop: rpx(20),
    },
});

/**
 * "<div class="content_tpl"><div class="formwork"><div class="formwork_img"><img class="" src="img/product/detail/59003d3fNd4e6c74e.jpg"></div></div><div class="formwork"><div class="formwork_img"><img class="" src="img/product/detail/59003d49Nd9aa8623.jpg"></div></div><div class="formwork"><div class="formwork_img"><img class="" src="img/product/detail/59003d53N79717f17.jpg"></div></div><div class="formwork"><div class="formwork_img"><img class="" src="img/product/detail/59003db4N5441df2e.jpg"></div></div><div class="formwork"><div class="formwork_img"><img class="" src="img/product/detail/59003afdN7d9208b8.jpg"></div></div></div>"
 */
